/**
 * @Name:  Barrage
 * @Author:
 * @Desc:  弹幕实验
 * @Date: 2020-12-04 13:51:51
 */

import React, { Component } from "react";
import $ from "jquery";
import { Switch } from "antd";

import styles from "./styles.module.less";
const lineList = [
  { name: "", time: 500, code: "01", content: "asjkdashdhj" },
  { name: "", time: 1000, code: "00", content: "安徽第三方" },
  { name: "", time: 500, code: "03", content: "asjkdashdhj" },
  { name: "", time: 1000, code: "101", content: "埃及航空技术的" },
  { name: "", time: 1500, code: "04", content: "好噶似的" },
  { name: "", time: 500, code: "05", content: "爱的也会怕是才能教案数不论安徽山东航空夸奖哈圣诞节贺卡收到阿萨的环境哈桑啊速度和技术" },
  { name: "", time: 2000, code: "13", content: "破案就是都没出门， " },
  { name: "", time: 500, code: "06", content: "爱的也会怕是才能教案数不论安徽山东航空夸奖哈圣诞节贺卡收到阿萨的环境哈桑啊速度和技术" },
  { name: "", time: 1000, code: "08", content: "埃及航空技术的" },
  { name: "", time: 500, code: "02", content: "asjkdashdhj" },
  { name: "", time: 2000, code: "160", content: "破案就是都没出门， " },
  { name: "", time: 1000, code: "10", content: "埃及航空技术的" },
  { name: "", time: 500, code: "11", content: "i欧普i哦莫" },
  { name: "", time: 500, code: "07", content: "爱的也会怕是才能教案数不论安徽山东航空夸奖哈圣诞节贺卡收到阿萨的环境哈桑啊速度和技术" },
  { name: "", time: 500, code: "001", content: "asjkdashdhj这是中间啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊" },
  { name: "", time: 500, code: "12", content: "吉萨北京的设备" },
  { name: "", time: 2000, code: "14", content: "破案就是都没出门， " },
  { name: "", time: 1000, code: "21", content: "hdjklahslkjfl " },
  { name: "", time: 1000, code: "09", content: "埃及航空技术的" },
  { name: "", time: 1000, code: "22", content: "hdjklahslkjfl " },
  { name: "", time: 2000, code: "15", content: "破案就是都没出门， " },
  { name: "", time: 1000, code: "20", content: "hdjklahslkjfl " },
  { name: "", time: 2000, code: "16", content: "破案就是都没出门， " },
  { name: "", time: 2000, code: "171", content: "ask的课程" },
  { name: "", time: 2000, code: "172", content: "ask的课程" },
  { name: "", time: 2000, code: "173", content: "ask的课程" },
  { name: "", time: 2000, code: "174", content: "ask的课程" },
  { name: "", time: 2000, code: "175", content: "ask的课程" },
  { name: "", time: 2000, code: "176", content: "ask的课程" },
  { name: "", time: 2000, code: "177", content: "ask的课程" },
  { name: "", time: 2000, code: "178", content: "ask的课程" },
  { name: "", time: 2000, code: "179", content: "ask的课程" },
  { name: "", time: 2000, code: "170", content: "ask的课程" },
  { name: "", time: 2000, code: "17", content: "ask的课程" },
  { name: "", time: 2000, code: "18", content: "去我饿ui哦" },
  { name: "", time: 1500, code: "19", content: "u都没参加韩国" },
  { name: "", time: 1000, code: "23", content: "hdjklahslkjfl " },
  { name: "", time: 1500, code: "24", content: "u都没参加韩国" },
  { name: "", time: 500, code: "25", content: "爱的也会怕是才能教案数不论安徽山东航空夸奖哈圣诞节贺卡收到阿萨的环境哈桑啊速度和技术" },
  { name: "", time: 500, code: "26", content: "asjkdashdhj" },
  { name: "", time: 1000, code: "27", content: "倒数第二条" },
  { name: "", time: 500, code: "28", content: "爱的也会怕是才能教案数不论安徽山东航空夸奖哈圣诞节贺卡收到阿萨的环境哈桑啊速度和技术" },
  { name: "", time: 1500, code: "29", content: "我是最后一条===========" }
];
let colorList = ["#DC143C", "#7B68EE", "#4169E1", "#00BFFF", "#228B22", "#D2691E", "#F08080", "#FA8072", "#8B4513", "#8A2BE2"];
const speeds = 6000; //弹幕速度
class Barrage extends Component {
  state = {
    checked: true
  };
  componentDidMount() {
    this.openBarrage();
  }
  /**
   * @name openBarrage
   * @description 开启弹幕
   */
  openBarrage = () => {
    const clientHeight = $("#bar_body").height(); //0 ~ clientHeight 弹幕上下边界
    const width = $("#bar_body").width(); //弹幕左右边界-prev
    console.log("width=======", width);
    let speedCg = (width / 500) * speeds; //默认width：500所需时间6秒
    for (let i = 0; i < lineList.length; i++) {
      let colorNum = parseInt(Math.random() * 10);
      let str = `<div class="${styles.bar_line}" id=${i}>${lineList[i].content}</div>`;
      $("#bar_hid").append(str);

      const lineWidth = $(`#${i}`)[0].offsetWidth; //每条弹幕长度
      const lineHeight = $(`#${i}`)[0].offsetHeight; //每条弹幕高度

      const clientWidth = -(width + lineWidth); //弹幕左右边界 0 ~ width + lineWidth
      const countHeight = lineHeight * i; //随机顶部距离+弹幕高
      const maxTop = clientHeight - lineHeight; //最大顶部距离
      const tops = countHeight > maxTop ? this.amxTopBack(maxTop, clientHeight, lineHeight, i) : countHeight; //边界判定
      setTimeout(() => {
        $(`#${i}`).css({ top: tops, color: colorList[colorNum] });
        $(`#${i}`).animate({ left: `${clientWidth}px` }, speedCg, "linear", () => {
          $(`#${i}`).css({ display: "none" }); //动画结束隐藏元素
        }); //从左到右动画,linear:匀速
      }, lineList[i].time); //根据时间来调整出现顺序
    }
  };
  /**
   * @name amxTopBack
   * @param {Number} val 下标
   * @param {Number} maxTop 弹幕距顶部最大距离
   * @param {Number} lineHeight 当前弹幕高度
   * @param {Number} clientHeight 弹幕区域高度
   */
  amxTopBack = (maxTop, clientHeight, lineHeight, val) => {
    let heights = lineHeight / 2; //取一半，交叉显示
    let num = Math.ceil((lineHeight * val - clientHeight) / lineHeight); //第二轮弹幕渲染，从顶部开始
    let res = Math.abs(num) * heights > maxTop ? maxTop : Math.abs(num) * heights;
    return res;
  };

  /**
   * @name checkeds
   * @param val true:显示；false:隐藏；
   * @description 显示/隐藏弹幕
   */
  checkeds = (val) => {
    this.setState({ checked: val });
  };
  render() {
    const { checked } = this.state;
    return (
      <div className={styles.blocks}>
        <h3>前端弹幕实验</h3>
        <div className={styles.bar_body} id="bar_body">
          <div className={styles.bar_hid} id="bar_hid" style={{ overflow: checked ? null : "hidden" }}></div>
        </div>
        <Switch checkedChildren="开" unCheckedChildren="关" checked={checked} onClick={this.checkeds} />
        <Test01 data="ahahhah" mes="1111" />
        <Test02 data="22ahahhah" mes="2222" />
      </div>
    );
  }
}

function Test01(props) {
  const { data, mes } = props;
  return (
    <div>
      test{data}
      {mes}
    </div>
  );
}

const Test02 = (props) => {
  const { data, mes } = props;
  return (
    <div>
      Test02{data}
      {mes}
    </div>
  );
};

export default Barrage;
